/* custom-tab-bar/index.wxss */
:host {
	/*定义全局css变量*/
	--bgc: #ebab70;
}

.display_flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex_row {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.flex_column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.j_c {
	justify-content: center;
}


/*tabbar样式*/
.tabbar {
	position: fixed;
	width: 100%;
	height: 120rpx;
	bottom: 0;
	background-color: #fff;
	box-shadow: 0 2px 15px rgba(184, 184, 210, .5);
	pointer-events: auto;

	/* 设置ios底部安全距离 */
	/*兼容 IOS<11.2*/
	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
	padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
	width: 20%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-bottom: 20rpx;
}

.tabbar-item-icon {
	width: 40rpx;
	height: 40rpx;
}

.tabbar-item-text {
	font-size: 22rpx;
	color: var(--bgc);
	font-weight: bold;
	position: absolute;
	transform: translateY(40rpx);

	// 默认不显示
	// opacity: 0;
}

.tabbar-circle {
	position: absolute;
	width: 128rpx;
	height: 128rpx;
	background-color: #fff;
	border-radius: 50%;
	font-weight: bold;
	z-index: 1;
	font-size: 45rpx;
	color: #ffffff;
	top: -50rpx;
}

.tabbar-circle::after {
	content: '';
	position: absolute;
	width: 104rpx;
	height: 104rpx;
	background-color: var(--bgc);
	z-index: -1;
	border-radius: 50%;
	left: 12rpx;
	top: 12rpx;
}

.tabbar-item.active::after {
	content: '';
	position: absolute;
	width: 52rpx;
	height: 4rpx;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--bgc);
}